<!DOCTYPE html>
<html lang="en" xmlns:v-blind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <base th:hret="@{/}" href="/ValleyBookCity_tomcat_war_exploded/">
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/cart.css"/>
    <script src="static/Ajax/axios.js"></script>
    <script src="static/Vue/Vue.js"></script>

</head>
<body>
<div class="header">
    <div class="w">
        <div class="header-left">
            <a href="index.html">
                <img src="static/img/logo.gif" alt=""
                /></a>
            <h1>我的购物车</h1>
        </div>
        <div class="header-right">
            <h3>欢迎<span th:text="${session.user==null?'张总':session.user.username}">张总</span>光临尚硅谷书城</h3>
            <div class="order"><a th:href="@{Order(method=toOrder)}"
                                  href="Servlet?method=toOrder">我的订单</a></div>
            <div class="destory"><a th:href="@{Servlet(method=logout)}" href="index.html">注销</a></div>
            <div class="gohome">
                <a th:href="@{index.html}" href="index.html">返回</a>
            </div>
        </div>
    </div>
</div>
<div id="app">


    <div class="list">
        <div class="w">
            <table>
                <thead>
                <tr>
                    <th>图片</th>
                    <th>商品名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                </thead>
                <thead v-if="totalCount==0">
                <tr>
                    <th colspan="6">购物车为空</th>
                </tr>
                </thead>
                <tbody v-else="totalCount!=0">
                <tr v-for="CartIterm in CartItems">
                    <td>
                        <img :src="CartIterm.book.imgPath" alt=""/>
                    </td>
                    <td>{{CartIterm.book.bookName}}</td>
                    <td>
                        <span class="count" @click="subCount(CartIterm.book.bookId)">-</span>
                        <input class="count-num" type="text" v-model:value="CartIterm.count"
                               @change="changeCount(CartIterm.book.bookId)"/>
                        <span class="count" @click="addCount(CartIterm.book.bookId)">+</span>
                    </td>
                    <td>{{CartIterm.book.price}}</td>
                    <td>{{CartIterm.amount}}</td>
                    <td><a href="" @click.prevent="delBook(CartIterm.book.bookId)">删除</a></td>
                </tr>
                <tr>
                    <td>
                        <img src="static/uploads/kanjian.jpg" alt=""/>
                    </td>
                    <td>看见</td>
                    <td>
                        <span class="count">-</span>
                        <input class="count-num" type="text" value="1"/>
                        <span class="count">+</span>
                    </td>
                    <td>40.1</td>
                    <td>40.1</td>
                    <td><a href="">删除</a></td>
                </tr>
                </tbody>
            </table>
            <div class="footer">
                <div class="footer-left">
                    <a href="#" class="clear-cart" @click.prevent="clearCart()">清空购物车</a>
                    <a href="#">继续购物</a>
                </div>
                <div class="footer-right">
                    <div>共<span>{{totalCount}}</span>件商品</div>
                    <div class="total-price">总金额<span>{{totalAmount}}</span>元</div>
                    <a class="pay"  th:href="@{Order(method=toCheckCart)}" href="checkout.html">去结账</a>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="w">
            <div class="top">
                <ul>
                    <li>
                        <a href="">
                            <img src="static/img/bottom1.png" alt=""/>
                            <span>大咖级讲师亲自授课</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/img/bottom.png" alt=""/>
                            <span>课程为学员成长持续赋能</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/img/bottom2.png" alt=""/>
                            <span>学员真是情况大公开</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="content">
                <dl>
                    <dt>关于尚硅谷</dt>
                    <dd>教育理念</dd>
                    <!-- <dd>名师团队</dd>
                    <dd>学员心声</dd> -->
                </dl>
                <dl>
                    <dt>资源下载</dt>
                    <dd>视频下载</dd>
                    <!-- <dd>资料下载</dd>
                    <dd>工具下载</dd> -->
                </dl>
                <dl>
                    <dt>加入我们</dt>
                    <dd>招聘岗位</dd>
                    <!-- <dd>岗位介绍</dd>
                    <dd>招贤纳师</dd> -->
                </dl>
                <dl>
                    <dt>联系我们</dt>
                    <dd>http://www.atguigu.com</dd>
                    <dd></dd>
                </dl>
            </div>
        </div>
        <div class="down">
            尚硅谷书城.Copyright ©2015
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            CartItems: [],
            totalCount: 0,
            totalAmount: 0
        },
        methods: {
            delBook: function (bookId) {
                axios({
                    method: "post",
                    url: "Cart",
                    params: {
                        method: "delBook",
                        id: bookId
                    }
                }).then(Response => {
                    if (Response.data.flag) {
                        this.CartItems = Response.data.resultData[0]
                        this.totalCount = Response.data.resultData[1]
                        this.totalAmount = Response.data.resultData[2]
                    }
                })
            },
            clearCart: function () {
                alert(100)
                axios({
                    method: "post",
                    url: "Cart",
                    params: {
                        method: "clearCart"
                    }
                }).then(Response => {
                    if (Response.data.flag) {
                        this.CartItems = [];
                        this.totalCount = 0;
                        this.totalAmount = 0;
                    }

                })
            },
            addCount: function (bookId) {
                axios({
                    method: "post",
                    url: "Cart",
                    params: {
                        method: "addCount",
                        id: bookId
                    }
                }).then(Response => {
                    if (Response.data.flag) {
                        this.CartItems = Response.data.resultData[0]
                        this.totalCount = Response.data.resultData[1]
                        this.totalAmount = Response.data.resultData[2]
                    }
                })
            },
            subCount: function (bookId) {
                const count = event.target.nextElementSibling.value;
                if (count==1) {
                    const flag = confirm("就剩一本，再删就没了，确定要继续吗？");
                    if (flag) {
                        this.delBook(bookId)
                    }
                }else{
                    axios({
                        method: "post",
                        url: "Cart",
                        params: {
                            method: "subCount",
                            id: bookId
                        }
                    }).then(Response => {
                        if (Response.data.flag) {
                            this.CartItems = Response.data.resultData[0]
                            this.totalCount = Response.data.resultData[1]
                            this.totalAmount = Response.data.resultData[2]
                        }
                    })
                }
            },
            changeCount: function (bookId) {
                const count = event.target.value;
                    axios({
                        method: "post",
                        url: "Cart",
                        params: {
                            method: "changeCount",
                            id: bookId,
                            count: count,
                        }
                    }).then(Response => {
                        if (Response.data.flag) {
                            this.CartItems = Response.data.resultData[0]
                            this.totalCount = Response.data.resultData[1]
                            this.totalAmount = Response.data.resultData[2]
                        }else{
                            alert("添加失败！不能小于零")
                            this.CartItems = Response.data.resultData[0]
                            this.totalCount = Response.data.resultData[1]
                            this.totalAmount = Response.data.resultData[2]
                        }
                    })
                }
        },
        created: function () {
            //创建vue对象后，获得后台数据
            axios({
                method: "post",
                url: "Cart",
                params: {
                    method: 'showCart'
                }
            }).then(Response => {
                if (Response.data.flag) {
                    this.CartItems = Response.data.resultData[0]
                    this.totalCount = Response.data.resultData[1]
                    this.totalAmount = Response.data.resultData[2]
                }
            })
        }
    })
</script>
</html>
